<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加用户</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<link rel="stylesheet" href="../../libme/modules/formselects/formSelects-v4.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<link rel="stylesheet" href="../../libme/modules/dtree/dtree.css">
	<link rel="stylesheet" href="../../libme/modules/dtree/font/dtreefont.css">
	<style type="text/css">
		/* 修改验证表单异常时提示颜色 */
		/*.layui-layer-tips .layui-layer-content {*/
			/*background-color: rgb(80, 80, 80) !important;*/
			/*color: #30ff00 !important;*/
		/*}*/
		/*.layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT {*/
			/*border-right-color: rgb(80, 80, 80)!important;*/
		/*}*/
	</style>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<!--<form class="layui-form layui-form-pane ok-form">-->
	<form class="layui-form ok-form" lay-filter="sysuser-add">
		<div class="layui-form-item">
			<label class="layui-form-label">登录账户</label>
			<div class="layui-input-block">
				<input type="text" name="username" placeholder="登录用户账号" autocomplete="off" class="layui-input" lay-verify="required|username" lay-verType="tips" id="username">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">用户昵称</label>
			<div class="layui-input-block">
				<input type="text" name="nickname" placeholder="用户昵称" autocomplete="off" class="layui-input" lay-verify="required" lay-verType="tips" id="nickname">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">电子邮箱</label>
			<div class="layui-input-block">
				<input type="text" name="email" placeholder="电子邮箱地址" autocomplete="off" class="layui-input" lay-verify="email" lay-verType="tips" id="email">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">手机号码</label>
			<div class="layui-input-block">
				<input type="text" name="mobile" placeholder="联系方式" autocomplete="off" class="layui-input" lay-verify="mobile" lay-verType="tips" id="mobile">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">账户类型</label>
			<div class="layui-input-block">
				<input type="radio" name="userType" value="00" title="系统用户" lay-filter="userType" checked>
				<input type="radio" name="userType" value="10" title="内部用户" lay-filter="userType">
				<input type="radio" name="userType" value="20" title="注册用户" lay-filter="userType">
			</div>
		</div>

		<!--<div class="layui-form-item">-->
			<!--<label class="layui-form-label">工作岗位</label>-->
			<!--<div class="layui-input-inline">-->
				<!--<input type="text" name="postName" placeholder="所属部门" autocomplete="off" class="layui-input"-->
					   <!--lay-verify="required" lay-verType="tips" id="postName">-->
				<!--<input type="hidden" name="postId" id="postId" value=""/>-->
			<!--</div>-->
			<!--<button type="button" class="layui-btn layui-btn-normal" id="postBtn">选择岗位</button>-->
		<!--</div>-->

		<div class="layui-form-item">
			<label class="layui-form-label">工作岗位</label>
			<div class="layui-input-block">
				<select name="postId" lay-verify="required" id="postId"></select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">所属部门</label>
			<div class="layui-input-inline">
				<input type="text" name="deptName" placeholder="所属部门" autocomplete="off" class="layui-input"
					   lay-verify="required" lay-verType="tips" id="deptName">
				<input type="hidden" name="deptId" id="deptId" value=""/>
			</div>
				<button type="button" class="layui-btn layui-btn-normal" id="deptBtn">选择部门</button>
		</div>

		<!--<div class="layui-form-item">-->
			<!--<label class="layui-form-label">所属部门</label>-->
			<!--<div class="layui-input-block">-->
				<!--<ul id="dept" class="dtree" data-id="0" ></ul>-->
			<!--</div>-->
		<!--</div>-->

		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<input type="text" name="remark" placeholder="用户什么也没有留下" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="add">创&nbsp;&nbsp;建</button>
				<!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../libme/pages/body.js"></script>
<script src="../../libme/script/pinyin.js"></script>
<script type="text/javascript">
	layui.use(["element", "form", "jquery", "okMock", "api", "dtree", "layer"], function () {
		let form = layui.form;
		let layer = layui.layer;
        let dtree = layui.dtree;
        let okMock = layui.okMock;
        let $ = layui.jquery;
        let api = layui.api;
		okLoading.close();

		form.verify({
            username: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
                if(!new RegExp("^[a-zA-Z0-9_]{4,24}$").test(value)){
                    return '用户名长度必须为4-24个字符';
                }
            },
			email: function (value, item) {
				return api.regEmail(value);
            },
			mobile: function (value, item) {
                return api.regMobile(value);
            }
		})
        form.on("submit(add)", function (data) {
			// TODO 权限节点校验
			api.request({
				url:okMock.api.user.create,
				where: data.field,
				dataType: api.jsonType.ujson
			},function (resp, stat) {
                api.greenTickMsg("添加成功", function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            })
			return false;
		});

        // var dtreeObj = dtree.render({
        //     elem: "#dept",
        //     url: okMock.api.dept.dtree, // 使用url加载（可与data加载同时存在）
        //     dataStyle: "layuiStyle",    //使用layui风格的数据格式（使用"defaultStyle"出现无法加载数据情况）
        //     dataFormat: "list",         //配置data的风格为list
        //     response:{//返回JSON字段与DTree字段不一致时需要使用
        //         statusCode: 100, //返回码
        //     },//修改response中返回数据的定义
        //     ficon:["1", "8"], //一级图标样式  ["一级图标非叶子节点", "一级图标叶子节点"]  ,只使用一个的话,就是 "一级图标叶子节点"
        //     icon: "-1",  //修改二级图标样式
        //     line: true,
        //     initLevel: 3,//默认展开层级
        //     //scroll:"#toolbarDiv", // 滚动框绑定div元素
        //     none:'查询不到数据',   //
			// select: true,
			// width: '100%',
        //     //checkbar:true, //开启复选框
        //     checkbarType: "only", // 默认就是all，其他的值为： no-all  p-casc   self  only
        //     checkbarData: "choose", // "choose" 记录选中（默认）， "change"：记录变更， "all"：记录全部， "halfChoose"："记录选中和半选（V2.5.0新增）"
        //     done: function(res, $ul, first){
        //         //res:当前异步加载的数据，$obj:当前组件的根节点的JQuery对象，first:是否首次加载
        //         if(first) {
        //             //dtree.dataInit("dept", "205");
        //             // 也可以在这里指定，第二个参数如果不填，则会自动返显当前选中的数据
        //             //var selectParam = dtree.selectVal("dept");
        //
        //             //dtree.chooseDataInit("dept","205");
        //             //dtree.chooseDataInit("menus","1000001,1000003,1003,1000008"); // 初始化选中
        //             // 或者是
        //             // dtree.chooseDataInit("checkbarTreeInitchoose",["001001","001002"]); // 初始化选中
        //             // 多级复选框下使用二维数组初始化
        //             // dtree.chooseDataInit("checkbarTreeInitchoose",[["001001","001002"],["001003","001004"]]);
        //         }
        //     }
        // });

        function showDeptDtree() {
			layer.open({
				type: 1,  //type:0 也行
				title: "选择部门",
				area: ["280px", "80%"],
				content: '<ul id="depts" class="dtree" data-id="0"></ul>',
				btn: ['确认'],
				success: function(layero, index){
					var DTree = dtree.render({
						//  obj: $(layero).find("#openTree1"),    如果直接用elem加载不出来，则可以使用这个方式加载jquery的DOM
						elem: "#depts",
						url: okMock.api.dept.dtree,
						dataStyle: "layuiStyle",    //使用layui风格的数据格式（使用"defaultStyle"出现无法加载数据情况）
						dataFormat: "list",         //配置data的风格为list
						response:{//返回JSON字段与DTree字段不一致时需要使用
							statusCode: 100, //返回码
						},//修改response中返回数据的定义
                        done: function(res, $ul, first){
							if(first) {
                                dtree.dataInit("depts", $('#deptId').val());
                            }
                        }
					});

					// 绑定节点的双击
					dtree.on("nodedblclick('depts')", function(obj){
						$("#deptId").val(obj.param.nodeId);
						$("#deptName").val(obj.param.context);

						layer.close(index);
					});
				},
				yes: function(index, layero) {
					var param = dtree.getNowParam("depts"); // 获取当前选中节点
                    $("#deptId").val(param.nodeId);
                    $("#deptName").val(param.context);
					layer.close(index);
				}
			});
        }
        function showPostDtree() {
			layer.open({
				type: 1,  //type:0 也行
				title: "选择岗位",
				area: ["400px", "80%"],
				content: '<ul id="posts" class="dtree" data-id="0"></ul>',
				btn: ['确认'],
				success: function(layero, index){
					var DTree = dtree.render({
						//  obj: $(layero).find("#openTree1"),    如果直接用elem加载不出来，则可以使用这个方式加载jquery的DOM
						elem: "#depts",
						url: okMock.api.post.dtree,
						dataStyle: "layuiStyle",    //使用layui风格的数据格式（使用"defaultStyle"出现无法加载数据情况）
						dataFormat: "list",         //配置data的风格为list
						response:{//返回JSON字段与DTree字段不一致时需要使用
							statusCode: 100, //返回码
						},//修改response中返回数据的定义
                        done: function(res, $ul, first){
							if(first) {
                                dtree.dataInit("depts", $('#deptId').val());
                            }
                        }
					});

					// 绑定节点的双击
					dtree.on("nodedblclick('depts')", function(obj){
						$("#deptId").val(obj.param.nodeId);
						$("#deptName").val(obj.param.context);

						layer.close(index);
					});
				},
				yes: function(index, layero) {
					var param = dtree.getNowParam("depts"); // 获取当前选中节点
                    $("#deptId").val(param.nodeId);
                    $("#deptName").val(param.context);
					layer.close(index);
				}
			});
        }

        $('#deptBtn,#deptName').click(function () {
            showDeptDtree();
        });
        
        function postSelectBox() {
            var elePost = $("#postId");
            elePost.append('<option value="">工作岗位</option>')
            $.ajax({
                url:okMock.api.post.selectBoxList,
                success: function (res, status) {
                    if(res.code == api.responseCode.success) {
                        $.each(res.extend.data, function (idx, obj) {
                            elePost.append('<option value="'+ obj.postId +'">'+ obj.postName + '/ ' + obj.postCode +'</option>');
                        })
                    }
                },
                complete: function () {
                    //form.render('select','sysuser-add');
                    renderForm();
                }
            });
        }
        
        function renderForm() {
            form.render('select','sysuser-add');
        }

        $(function () {//页面加载
			$('input[name="username"]').blur(function () {
			    var ele = "#username";
                var that = $(this)
				//layer.msg($(this).val())
				var val =  $(this).val().trim();
				if(val == '' || val.length <=0 || val == undefined) {
					api.tips('用户名不能为空','#username','d');
					that.focus();
					return false;
                }
                if(!new RegExp("^[a-zA-Z0-9_]{4,24}$").test(val)) {
                    api.tips('用户名长度必须为4-24个字符',ele,'d');
                    that.focus();
                    return false;
                }
                if(!new RegExp("^[a-zA-Z0-9_]+$").test(val)) {
                    api.tips('用户名不能有特殊字符',ele,'d');
                    that.focus();
                    return false;
                }

                $.ajax({
                    url: okMock.api.user.checkUsernameExist,
                    dataType: api.jsonType.text,
                    data: {username: val},
					//sync: false,
                    success: function (resp, stat) {
                        console.log(resp)
                        if(resp=='true') {
                            //layer.msg("用户名已存在")
                            api.tips('用户名已经存在，请换一个用户名',ele,'d')
                            that.focus()
                        }
                    }
                })
				return false
            })

			//在调出页面执行加载,下述则在此页面执行加载
			//postSelectBox();
			
        })
	})
	function iframeRenderForm() {//由父页面调用
		layui.use(['form'], function () {
			var form = layui.form;
            form.render('select','sysuser-add');
        })
    }
</script>
</body>
</html>
